<template>
    <div class="anaform-content">
        <el-descriptions class="margin-top" title="选址分析结果" :column="1" :size="size" border>
            <template slot="extra">
                <el-button type="primary" size="small" @click="closefatherwind">关闭</el-button>
            </template>
            <el-descriptions-item v-for="(item,index) in resultinfo" :key="index">
                <template slot="label">
                    <i class="el-icon-notebook-1"></i>
                    {{item.name}}
                </template>
                <el-tag size="small" v-show="item.value>0?true:false" style="color:red;margin-right: 15px">冲突</el-tag>
                <el-tag size="small" v-show="item.value>0?false:true">不冲突</el-tag>
                <el-tag size="small" v-show="item.value>0?true:false" @click="focuscliplayer(item.layername,item.serverurl)">查看</el-tag>
            </el-descriptions-item>
        </el-descriptions>
        <div class="anaret-content">
            <Echart id="analysis" :options="options" ref="analysis"  height="320px" width="600px"/>
        </div>
        <div class="lastopinion-content">
            <p>专家建议:</p>
            <p>该地块与上位规划冲突，建议调整！</p>

        </div>



    </div>
</template>
<script>
    export default {
        props:['retgeoinfo'],
        watch: {
            retgeoinfo(newV,oldV) {
                // console.log(newV)
                this.resultinfo=newV
                this.initchart()

            }},
        data() {
            return {
                size:'',
                resultinfo:[],
                options:{},
            }
        },
        methods:{
            closefatherwind(){
                this.$emit('closewind',{'status':false});
            },
            focuscliplayer(name,url){
                console.log(3)
                this.$emit('closewind',{'status':true,'layername':name,'serverurl':url});
            },
            initchart(){
                var option={
                    tooltip: {
                        trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        data: [
                            '控制性详细规划',
                            '基本农田保护区',
                            '建设用地管制区',
                            '村镇建设控制区',
                            '土地用途区'
                        ]
                    },
                    series: [
                        {
                            name: '冲突数据',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '30%'],
                            label: {
                                position: 'inner',
                                fontSize: 14
                            },
                            labelLine: {
                                show: false
                            },
                            data: this.resultinfo
                        },
                        {
                            name: '冲突数据',
                            type: 'pie',
                            radius: ['45%', '60%'],
                            labelLine: {
                                length: 30
                            },
                            label: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                backgroundColor: '#F6F8FC',
                                borderColor: '#8C8D8E',
                                borderWidth: 1,
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: '#6E7079',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#8C8D8E',
                                        width: '100%',
                                        borderWidth: 1,
                                        height: 0
                                    },
                                    b: {
                                        color: '#4C5058',
                                        fontSize: 14,
                                        fontWeight: 'bold',
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#fff',
                                        backgroundColor: '#4C5058',
                                        padding: [3, 4],
                                        borderRadius: 4
                                    }
                                }
                            },
                            data: [
                                { value: 1048, name: '类别1' },
                                { value: 335, name: '类别2' },
                                { value: 310, name: '类别3' },
                                { value: 251, name: '类别4' },
                                { value: 234, name: '类别5' },
                                { value: 147, name: '类别6' },
                                { value: 135, name: '类别7' },
                                { value: 234, name: '类别8' },
                                { value: 147, name: '类别9' },
                                { value: 135, name: '类别10' },
                                { value: 102, name: '类别11' }
                            ]
                        }
                    ]
                }
                this.options=option
            }

        }



    };
</script>
<style >
   .anaform-content{
           width: 35%;
           height:75%;
           position: absolute;
           padding: 0;
           opacity: 1;
           z-index: 1;
           right: 2%;
           top:3%;
           background: white;
           color: white;
           border: 0;
           transition: opacity 100ms ease-in;
           display: flex;
           flex-direction: column;

   }
   .anaret-content{
       width: 100%;
       margin-top: 10px;

       /*background-color: blue;*/
   }
    .lastopinion-content{
        width: 100%;
        margin-top: 10px;
        height: 20%;
        color: green;
        /*background-color: blue;*/
    }
</style>
